<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="Hexo Theme Keep">
    <meta name="description" content="Hexo Theme Keep">
    <meta name="author" content="cheng5.du">
    
    <title>
        
            一些面试题（JavaScript） |
        
        cheng5.du
    </title>
    
<link rel="stylesheet" href="/css/style.css">

    <link rel="shortcut icon" href="/images/avatar.jpeg">
    
<link rel="stylesheet" href="/css/font-awesome.min.css">

    <script id="hexo-configurations">
    let KEEP = window.KEEP || {};
    KEEP.hexo_config = {"hostname":"example.com","root":"/","language":"zh-CN"};
    KEEP.theme_config = {"toc":{"enable":false,"number":false,"expand_all":false,"init_open":false},"style":{"primary_color":"#0066CC","avatar":"/images/avatar.jpeg","favicon":"/images/avatar.jpeg","article_img_align":"left","left_side_width":"260px","content_max_width":"920px","hover":{"shadow":false,"scale":false},"first_screen":{"enable":true,"background_img":"/images/bg.svg","description":"人生海海，来日方长。"},"scroll":{"progress_bar":{"enable":false},"percent":{"enable":false}}},"local_search":{"enable":false,"preload":false},"code_copy":{"enable":false,"style":"default"},"pjax":{"enable":false},"lazyload":{"enable":false},"version":"3.4.5"};
    KEEP.language_ago = {"second":"%s 秒前","minute":"%s 分钟前","hour":"%s 小时前","day":"%s 天前","week":"%s 周前","month":"%s 个月前","year":"%s 年前"};
  </script>
<meta name="generator" content="Hexo 6.1.0"></head>


<body>
<div class="progress-bar-container">
    

    
</div>


<main class="page-container">

    

    <div class="page-main-content">

        <div class="page-main-content-top">
            <header class="header-wrapper">

    <div class="header-content">
        <div class="left">
            
            <a class="logo-title" href="/">
                cheng5.du
            </a>
        </div>

        <div class="right">
            <div class="pc">
                <ul class="menu-list">
                    
                        <li class="menu-item">
                            <a class=""
                               href="/"
                            >
                                首页
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/archives"
                            >
                                归档
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/categories"
                            >
                                分类
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/tags"
                            >
                                标签
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/netease"
                            >
                                网抑云
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/about"
                            >
                                关于我
                            </a>
                        </li>
                    
                    
                </ul>
            </div>
            <div class="mobile">
                
                <div class="icon-item menu-bar">
                    <div class="menu-bar-middle"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="header-drawer">
        <ul class="drawer-menu-list">
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/">首页</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/archives">归档</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/categories">分类</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/tags">标签</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/netease">网抑云</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/about">关于我</a>
                </li>
            
        </ul>
    </div>

    <div class="window-mask"></div>

</header>


        </div>

        <div class="page-main-content-middle">

            <div class="main-content">

                
                    <div class="fade-in-down-animation">
    <div class="article-content-container">

        <div class="article-title">
            <span class="title-hover-animation">一些面试题（JavaScript）</span>
        </div>

        
            <div class="article-header">
                <div class="avatar">
                    <img src="/images/avatar.jpeg">
                </div>
                <div class="info">
                    <div class="author">
                        <span class="name">cheng5.du</span>
                        
                    </div>
                    <div class="meta-info">
                        <div class="article-meta-info">
    <span class="article-date article-meta-item">
        <i class="fas fa-edit"></i>&nbsp;
        <span class="pc">2021-01-01 21:12:42</span>
        <span class="mobile">2021-01-01 21:12</span>
    </span>
    
        <span class="article-categories article-meta-item">
            <i class="fas fa-folder"></i>&nbsp;
            <ul>
                
                    <li>
                        <a href="/categories/%E5%89%8D%E7%AB%AF/">前端</a>&nbsp;
                    </li>
                
            </ul>
        </span>
    
    
        <span class="article-tags article-meta-item">
            <i class="fas fa-tags"></i>&nbsp;
            <ul>
                
                    <li>
                        <a href="/tags/JavaScript/">JavaScript</a>&nbsp;
                    </li>
                
                    <li>
                        | <a href="/tags/%E9%9D%A2%E8%AF%95%E9%A2%98/">面试题</a>&nbsp;
                    </li>
                
            </ul>
        </span>
    

    
    
    
    
</div>

                    </div>
                </div>
            </div>
        

        <div class="article-content markdown-body">
            <h2 id="面试题"><a href="#面试题" class="headerlink" title="面试题"></a>面试题</h2><h3 id="下面代码输出什么"><a href="#下面代码输出什么" class="headerlink" title="下面代码输出什么"></a>下面代码输出什么</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="number">10</span></span><br><span class="line">!(<span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(a)</span><br><span class="line">  a = <span class="number">5</span> <span class="comment">// 本身作用域没有定义a，所以相当于定义全局作用域，并赋值5</span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">a</span>)</span><br><span class="line">&#125;)()</span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="number">10</span></span><br><span class="line">!(<span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(a)</span><br><span class="line">  a = <span class="number">5</span> <span class="comment">// 本身作用域定义a，所以赋值本身作用域的a = 5</span></span><br><span class="line">  <span class="keyword">var</span> a = <span class="number">20</span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">a</span>)</span><br><span class="line">&#125;)()</span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="number">10</span></span><br><span class="line">!(<span class="keyword">function</span>(<span class="params">a</span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(a)</span><br><span class="line">  a = <span class="number">5</span></span><br><span class="line">  <span class="keyword">var</span> a = <span class="number">20</span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(a)</span><br><span class="line">&#125;)(a)</span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="number">10</span></span><br><span class="line">!(<span class="keyword">function</span>(<span class="params">b</span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(a)</span><br><span class="line">  a = <span class="number">5</span></span><br><span class="line">  <span class="keyword">var</span> a = <span class="number">20</span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(b)</span><br><span class="line">&#125;)(a)</span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="number">10</span></span><br><span class="line">!(<span class="keyword">function</span> <span class="title function_">a</span>(<span class="params"></span>) &#123;</span><br><span class="line">  a = <span class="number">5</span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(a)</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">a</span>)</span><br><span class="line">&#125;)()</span><br></pre></td></tr></table></figure>

<figure class="highlight text"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line">题1</span><br><span class="line">10 =》沿着作用域链，在全局作用域找到10</span><br><span class="line">5 =》this是window，a = 5后，在全局作用域找到5</span><br><span class="line"></span><br><span class="line">题2</span><br><span class="line">undefined =》var a = 20,变量提升，所以打印undefined</span><br><span class="line">10 =》由于a = 5赋值的是局部作用域的变量，所以全局作用域的a = 10</span><br><span class="line"></span><br><span class="line">题3</span><br><span class="line">解析：立即执行函数的参数为a，传入的参数值为10，所以相当于局部作用域的参数a = 10；如果这里不传参数，第一个console.log(a)还是undefined</span><br><span class="line">10 =》a在参数中已经定义，而且执行时传入了10</span><br><span class="line">20 =》var a = 20最后赋值，所以a取到的值为20</span><br><span class="line"></span><br><span class="line">题4</span><br><span class="line">解析：立即执行函数的参数为b，传入的参数为10，所以相当于局部b = 10</span><br><span class="line">undefined =》var a = 20变量提升</span><br><span class="line">10：如上b = 10</span><br><span class="line"></span><br><span class="line">题5</span><br><span class="line">解析：具名自执行函数名：只能在函数内部访问；相当于常量，不可更改。具体如下链接。</span><br><span class="line">ƒ a() &#123;</span><br><span class="line">  a = 5</span><br><span class="line">  console.log(a)</span><br><span class="line">  console.log(this.a)</span><br><span class="line">&#125;</span><br><span class="line">10</span><br></pre></td></tr></table></figure>

<p><a class="link"   target="_blank" rel="noopener" href="https://segmentfault.com/q/1010000002810093" >在JavaScript的立即执行的具名函数A内修改A的值时到底发生了什么？<i class="fas fa-external-link-alt"></i></a></p>
<h3 id="DOM与虚拟DOM"><a href="#DOM与虚拟DOM" class="headerlink" title="DOM与虚拟DOM"></a>DOM与虚拟DOM</h3><p><a class="link"   target="_blank" rel="noopener" href="https://zhuanlan.zhihu.com/p/55985627" >简单解说DOM和虚拟DOM的区别<i class="fas fa-external-link-alt"></i></a></p>
<h3 id="clientWidth-x2F-offsetWidth和clientX-x2F-pageX-x2F-screenX-x2F-offsetX"><a href="#clientWidth-x2F-offsetWidth和clientX-x2F-pageX-x2F-screenX-x2F-offsetX" class="headerlink" title="clientWidth&#x2F;offsetWidth和clientX&#x2F;pageX&#x2F;screenX&#x2F;offsetX"></a>clientWidth&#x2F;offsetWidth和clientX&#x2F;pageX&#x2F;screenX&#x2F;offsetX</h3><p><img src="https://cdn.jsdelivr.net/gh/superFatDu/blogPics@main/20210603/%E4%BD%8D%E7%BD%AE%E5%85%B3%E7%B3%BB.5260i7hqfug0.svg" alt="clientX/pageX/offsetX和clientWidth/offsetWidth"></p>
<h4 id="clientWidth-x2F-offsetWidth"><a href="#clientWidth-x2F-offsetWidth" class="headerlink" title="clientWidth&#x2F;offsetWidth"></a>clientWidth&#x2F;offsetWidth</h4><ol>
<li>clientWidth &#x3D; content + padding</li>
<li>offsetWidth &#x3D; content + padding + border</li>
</ol>
<h4 id="clientX-x2F-pageX-x2F-screenX-x2F-offsetX"><a href="#clientX-x2F-pageX-x2F-screenX-x2F-offsetX" class="headerlink" title="clientX&#x2F;pageX&#x2F;screenX&#x2F;offsetX"></a>clientX&#x2F;pageX&#x2F;screenX&#x2F;offsetX</h4><ol>
<li>clientX：浏览器左侧到点击位置距离</li>
<li>pageX：clientX + scrollX</li>
<li>screenX：显示器左侧到点击位置距离</li>
<li>offsetX：点击元素的左侧到点击位置的距离</li>
</ol>
<h3 id="箭头函数与普通函数（function）的区别是什么？构造函数（function）可以使用-new-生成实例，那么箭头函数可以吗？为什么？"><a href="#箭头函数与普通函数（function）的区别是什么？构造函数（function）可以使用-new-生成实例，那么箭头函数可以吗？为什么？" class="headerlink" title="箭头函数与普通函数（function）的区别是什么？构造函数（function）可以使用 new 生成实例，那么箭头函数可以吗？为什么？"></a>箭头函数与普通函数（function）的区别是什么？构造函数（function）可以使用 new 生成实例，那么箭头函数可以吗？为什么？</h3><h4 id="区别"><a href="#区别" class="headerlink" title="区别"></a>区别</h4><ol>
<li>箭头函数没有 this，它会从自己定义时的执行上下文继承 this（因此无法使用 apply &#x2F; call &#x2F; bind 进行绑定 this 值）</li>
<li>不绑定arguments</li>
<li>不能使用yield命令，所以箭头函数不能当作Generator函数</li>
</ol>
<h4 id="箭头函数不能使用new生成实例"><a href="#箭头函数不能使用new生成实例" class="headerlink" title="箭头函数不能使用new生成实例"></a>箭头函数不能使用new生成实例</h4><ol>
<li>箭头函数没有 this，它会从自己定义时的执行上下文继承 this（因此无法使用 apply &#x2F; call &#x2F; bind 进行绑定 this 值）</li>
<li>箭头函数没有prototype，无法进行原型链的继承</li>
</ol>
<h4 id="拓展"><a href="#拓展" class="headerlink" title="拓展"></a>拓展</h4><p>JavaScript内部有两个方法：[[Call]]，[[Construct]]</p>
<ol>
<li>正常调用执行使用的是[[Call]]方法</li>
<li>new调用执行[[Construct]]方法（箭头函数没有[[Construct]]方法，所以不能new生成实例）</li>
</ol>
<h3 id="值和引用"><a href="#值和引用" class="headerlink" title="值和引用"></a>值和引用</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">foo</span>(<span class="params">x</span>) &#123;</span><br><span class="line">  x.<span class="title function_">push</span>(<span class="number">4</span>)</span><br><span class="line">  x = [<span class="number">5</span>, <span class="number">6</span>, <span class="number">7</span>]</span><br><span class="line">  x.<span class="title function_">push</span>(<span class="number">8</span>)</span><br><span class="line">  <span class="keyword">return</span> x</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> a = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>]</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;foo(x)&#x27;</span>, <span class="title function_">foo</span>(a))</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;original a&#x27;</span>, a)</span><br><span class="line"></span><br><span class="line"><span class="comment">// expected output</span></span><br><span class="line"><span class="string">&#x27;foo(x)&#x27;</span> [<span class="number">5</span>, <span class="number">6</span>, <span class="number">7</span>, <span class="number">8</span>]</span><br><span class="line"><span class="string">&#x27;original a&#x27;</span> [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>]</span><br><span class="line"></span><br><span class="line"><span class="comment">// 将a当参数传递时，a和x都是[1, 2, 3]的引用</span></span><br><span class="line"><span class="comment">// x.push(4)，a和x的引用都改变为[1, 2, 3, 4]</span></span><br><span class="line"><span class="comment">// x = [5, 6, 7]，x重新赋值意味着x不再是[1, 2, 3, 4]的引用，但a没有改变引用</span></span><br><span class="line"><span class="comment">// x.push(8)，x指向[5, 6, 7, 8]，a还是指向[1, 2, 3, 4]</span></span><br></pre></td></tr></table></figure>

<p><img src="https://cdn.jsdelivr.net/gh/superFatDu/blogPics@main/20210609/%E5%80%BC%E4%B8%8E%E5%BC%95%E7%94%A8.1lkhiatufxcw.svg" alt="值与引用"></p>
<p>🚨 Notice：<strong>不能通过引用x来改变引用a的指向，只能修改x和a共同指向的值！！！</strong></p>
<h3 id="输出代码结果"><a href="#输出代码结果" class="headerlink" title="输出代码结果"></a>输出代码结果</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = &#123;&#125;, b = <span class="number">123</span>, c = <span class="string">&#x27;123&#x27;</span></span><br><span class="line">a[b] = <span class="string">&#x27;b&#x27;</span></span><br><span class="line">a[c] = <span class="string">&#x27;c&#x27;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(a[b])</span><br><span class="line"></span><br><span class="line"><span class="comment">// expected output</span></span><br><span class="line">c</span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = &#123;&#125;, b = <span class="title class_">Symbol</span>(<span class="string">&#x27;123&#x27;</span>), c = <span class="title class_">Symbol</span>(<span class="string">&#x27;123&#x27;</span>)</span><br><span class="line">a[b] = <span class="string">&#x27;b&#x27;</span></span><br><span class="line">a[c] = <span class="string">&#x27;c&#x27;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(a[b])</span><br><span class="line"></span><br><span class="line"><span class="comment">// expected output</span></span><br><span class="line">b</span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = &#123;&#125;, b = &#123;<span class="attr">key</span>: <span class="string">&#x27;123&#x27;</span>&#125;, c = &#123;<span class="attr">key</span>: <span class="string">&#x27;123&#x27;</span>&#125;</span><br><span class="line">a[b] = <span class="string">&#x27;b&#x27;</span></span><br><span class="line">a[c] = <span class="string">&#x27;c&#x27;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(a[b])</span><br><span class="line"></span><br><span class="line"><span class="comment">// expected output</span></span><br><span class="line">c</span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = &#123;&#125;, b = <span class="keyword">function</span>(<span class="params"></span>) &#123;<span class="keyword">return</span> <span class="number">123</span>&#125;, c = <span class="keyword">function</span>(<span class="params"></span>) &#123;<span class="keyword">return</span> <span class="string">&#x27;123&#x27;</span>&#125;</span><br><span class="line">a[b] = <span class="string">&#x27;b&#x27;</span></span><br><span class="line">a[c] = <span class="string">&#x27;c&#x27;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(a[b])</span><br><span class="line"></span><br><span class="line"><span class="comment">// expected output</span></span><br><span class="line">b</span><br></pre></td></tr></table></figure>

<h4 id="解析"><a href="#解析" class="headerlink" title="解析"></a>解析</h4><p>这道题考察的是<strong>对象键名的转换</strong>。</p>
<ol>
<li>对象的键名只能是<strong>字符串</strong>和<strong>Symbol类型</strong>。</li>
<li>其他类型的字符串会<strong>转换成字符串</strong>。</li>
<li>对象默认回调用<strong>toString()方法</strong>。</li>
</ol>
<p>🚨 Notice：对象类型中的很多封装函数都重写了toString()方法，比如Function，Date等，所以第四题中的b和c是不同的字符串，a[b]不会被a[c]覆盖。</p>
<h3 id="关于var-x2F-let"><a href="#关于var-x2F-let" class="headerlink" title="关于var&#x2F;let"></a>关于var&#x2F;let</h3><ol>
<li>var的话会直接在栈内存里预分配内存空间，然后等到实际语句执行的时候，再存储对应的变量，如果传的是引用类型，那么会在堆内存里开辟一个内存空间存储实际内容，栈内存会存储一个指向堆内存的指针。</li>
<li>let的话，是不会在栈内存里预分配内存空间，而且在栈内存分配变量时，做一个检查，如果已经有相同变量名存在就会报错。</li>
</ol>
<p><a class="link"   target="_blank" rel="noopener" href="https://fangyinghang.com/let-in-js/" >我用了两个月的时间才理解 let<i class="fas fa-external-link-alt"></i></a></p>
<h3 id="中文输入截断问题"><a href="#中文输入截断问题" class="headerlink" title="中文输入截断问题"></a>中文输入截断问题</h3><blockquote>
<p>compositionstart&#x2F;compositionend</p>
</blockquote>
<p><a class="link"   target="_blank" rel="noopener" href="https://segmentfault.com/a/1190000009246058" >中文输入截断问题<i class="fas fa-external-link-alt"></i></a></p>
<h3 id="类型转换-代码输出什么"><a href="#类型转换-代码输出什么" class="headerlink" title="类型转换-代码输出什么"></a>类型转换-代码输出什么</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="title class_">String</span>(<span class="string">&#x27;str&#x27;</span>) == <span class="keyword">new</span> <span class="title class_">String</span>(<span class="string">&#x27;str&#x27;</span>)</span><br><span class="line"><span class="title class_">String</span>(<span class="string">&#x27;str&#x27;</span>) === <span class="keyword">new</span> <span class="title class_">String</span>(<span class="string">&#x27;str&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// expected output</span></span><br><span class="line"><span class="literal">true</span></span><br><span class="line"><span class="literal">false</span></span><br></pre></td></tr></table></figure>

<h4 id="类型转换-代码输出什么-解析"><a href="#类型转换-代码输出什么-解析" class="headerlink" title="类型转换-代码输出什么-解析"></a>类型转换-代码输出什么-解析</h4><ol>
<li>当不用 new 运算符调用 String() 时，它只把 s 转换成原始的字符串，并返回转换后的值。</li>
<li>当 String() 和运算符 new 一起作为构造函数使用时，它返回一个新创建的 String 对象，存放的是字符串 s 或 s 的字符串表示。</li>
</ol>
<p>🚨 Notice：String()返回的值类型是<strong>String（字符串）</strong>，new String()返回的值的类型是<strong>Object（对象）</strong>。</p>
<ol>
<li>第一题，类型不一致时，new String(‘str’)的返回值会调用toString()方法，所以最后是String: ‘str’与String: ‘str’的比较，为true。</li>
<li>第二题，类型不一致，返回false。</li>
</ol>
<h3 id="属性为null-undefined-function-的对象经过JSON-stringify-后的输出"><a href="#属性为null-undefined-function-的对象经过JSON-stringify-后的输出" class="headerlink" title="属性为null,undefined,function(){}的对象经过JSON.stringify()后的输出"></a>属性为null,undefined,function(){}的对象经过JSON.stringify()后的输出</h3><blockquote>
<p>JSON.stringify(value, ?replacer, ?space)，将一个JavaScript对象转换成文本化的JSON。不能被文本化的属性会被忽略。</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> obj = &#123;</span><br><span class="line">  <span class="attr">a</span>: <span class="literal">null</span>,</span><br><span class="line">  <span class="attr">b</span>: <span class="literal">undefined</span>,</span><br><span class="line">  <span class="attr">c</span>: <span class="keyword">function</span>(<span class="params"></span>) &#123;&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="title class_">JSON</span>.<span class="title function_">stringify</span>(obj)</span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// expected output</span></span><br><span class="line"><span class="string">&quot;&#123;\&quot;a\&quot;:null&#125;&quot;</span></span><br><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h4 id="参数"><a href="#参数" class="headerlink" title="参数"></a>参数</h4><ol>
<li><p>replacer是一个过滤函数或则一个数组包含要被stringify的属性名。如果没有定义，默认所有属性都被stringify。</p>
 <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> obj = &#123;</span><br><span class="line">  <span class="attr">a</span>: <span class="number">1</span>,</span><br><span class="line">  <span class="attr">b</span>: <span class="literal">false</span>,</span><br><span class="line">  <span class="attr">c</span>: <span class="string">&#x27;hahaha&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 改变属性值；删除属性</span></span><br><span class="line"><span class="title class_">JSON</span>.<span class="title function_">stringify</span>(obj, <span class="keyword">function</span>(<span class="params">key,value</span>) &#123;</span><br><span class="line">  <span class="keyword">if</span> (key === <span class="string">&#x27;a&#x27;</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="number">0</span></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">if</span> (key === <span class="string">&#x27;c&#x27;</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="literal">undefined</span> <span class="comment">// 返回undefined说明属性被删除</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">// &quot;&#123;\&quot;a\&quot;:0,\&quot;b\&quot;:false&#125;&quot;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 过滤 =&gt; 使用数组过滤出需要的属性  </span></span><br><span class="line"><span class="title class_">JSON</span>.<span class="title function_">stringify</span>(obj, [<span class="string">&#x27;a&#x27;</span>, <span class="string">&#x27;c&#x27;</span>])</span><br><span class="line"><span class="comment">// &quot;&#123;\&quot;a\&quot;:1,\&quot;c\&quot;:\&quot;hahaha\&quot;&#125;&quot;</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>默认的JSON.stringify返回的值只要一行，而且完全没有空格，space可以添加多格，比如‘\t’。</p>
 <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> user = &#123;<span class="attr">name</span>: <span class="string">&#x27;andy&#x27;</span>, <span class="attr">isDead</span>: <span class="literal">false</span>, <span class="attr">age</span>: <span class="number">11</span>, <span class="attr">addr</span>: <span class="string">&#x27;shanghai&#x27;</span>&#125;;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(user, <span class="keyword">function</span>(<span class="params">key, value</span>)&#123;</span><br><span class="line">    <span class="keyword">if</span>(key === <span class="string">&#x27;isDead&#x27;</span>)&#123;</span><br><span class="line">        <span class="keyword">return</span> value === <span class="literal">true</span> ? <span class="number">1</span> : <span class="number">0</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> value;</span><br><span class="line">&#125;, <span class="string">&#x27;\t&#x27;</span>))</span><br><span class="line"><span class="comment">// &#123;</span></span><br><span class="line"><span class="comment">//  &quot;name&quot;: &quot;andy&quot;,</span></span><br><span class="line"><span class="comment">//  &quot;isDead&quot;: 0,</span></span><br><span class="line"><span class="comment">//  &quot;age&quot;: 11,</span></span><br><span class="line"><span class="comment">//  &quot;addr&quot;: &quot;shanghai&quot;</span></span><br><span class="line"><span class="comment">// &#125;</span></span><br></pre></td></tr></table></figure></li>
</ol>
<h4 id="不能被转换的情况"><a href="#不能被转换的情况" class="headerlink" title="不能被转换的情况"></a>不能被转换的情况</h4><ol>
<li><p>循环引用</p>
 <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> bar = &#123;</span><br><span class="line">  <span class="attr">a</span>: &#123;</span><br><span class="line">    <span class="attr">c</span>: foo</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> foo = &#123;</span><br><span class="line">  <span class="attr">b</span>: bar</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>Symbol，undefined,Function（对象啥都不返回，但如果是数组的话有例外，返回null）</p>
 <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> obj = &#123;</span><br><span class="line">  <span class="attr">a</span>: <span class="literal">null</span>,</span><br><span class="line">  <span class="attr">b</span>: <span class="literal">false</span>,</span><br><span class="line">  <span class="attr">c</span>: <span class="title class_">Symbol</span>(),</span><br><span class="line">  <span class="attr">d</span>: <span class="literal">undefined</span>,</span><br><span class="line">  <span class="attr">d</span>: <span class="keyword">function</span>(<span class="params"></span>) &#123;&#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="title class_">JSON</span>.<span class="title function_">stringify</span>(obj)</span><br><span class="line"><span class="comment">// &quot;&#123;\&quot;a\&quot;:null,\&quot;b\&quot;:false&#125;&quot;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> arr = [<span class="title class_">Symbol</span>(), <span class="number">2</span>, <span class="literal">undefined</span>, <span class="number">3</span>, <span class="keyword">function</span>(<span class="params"></span>)&#123;&#125;]</span><br><span class="line"><span class="title class_">JSON</span>.<span class="title function_">stringify</span>(arr)</span><br><span class="line"><span class="comment">// [null, 2, null, 3, null]</span></span><br></pre></td></tr></table></figure></li>
</ol>

        </div>

        

        
            <ul class="post-tags-box">
                
                    <li class="tag-item">
                        <a href="/tags/JavaScript/">#JavaScript</a>&nbsp;
                    </li>
                
                    <li class="tag-item">
                        <a href="/tags/%E9%9D%A2%E8%AF%95%E9%A2%98/">#面试题</a>&nbsp;
                    </li>
                
            </ul>
        

        
            <div class="article-nav">
                
                    <div class="article-prev">
                        <a class="prev"
                           rel="prev"
                           href="/2021/01/24/webpack%E5%9F%BA%E7%A1%80%E9%85%8D%E7%BD%AE/"
                        >
                            <span class="left arrow-icon flex-center">
                              <i class="fas fa-chevron-left"></i>
                            </span>
                            <span class="title flex-center">
                                <span class="post-nav-title-item">webpack基础配置</span>
                                <span class="post-nav-item">上一篇</span>
                            </span>
                        </a>
                    </div>
                
                
                    <div class="article-next">
                        <a class="next"
                           rel="next"
                           href="/2020/12/22/npm%E5%8C%85%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B/"
                        >
                            <span class="title flex-center">
                                <span class="post-nav-title-item">npm包发布流程</span>
                                <span class="post-nav-item">下一篇</span>
                            </span>
                            <span class="right arrow-icon flex-center">
                              <i class="fas fa-chevron-right"></i>
                            </span>
                        </a>
                    </div>
                
            </div>
        

        
    </div>
</div>


                
            </div>

        </div>

        <div class="page-main-content-bottom">
            <footer class="footer">
    <div class="info-container">
        <div class="copyright-info info-item">
            &copy;
            
              <span>2020</span>
              -
            
            2023&nbsp;<i class="fas fa-heart icon-animate"></i>&nbsp;<a href="/">cheng5.du</a>
        </div>
        
        <div class="theme-info info-item">
            Powered by <a target="_blank" href="https://hexo.io">Hexo</a>&nbsp;|&nbsp;Theme&nbsp;<a class="theme-version" target="_blank" href="https://github.com/XPoet/hexo-theme-keep">Keep v3.4.5</a>
        </div>
        
        
    </div>
</footer>

        </div>
    </div>

    
        <div class="post-tools">
            <div class="post-tools-container">
    <ul class="tools-list">
        <!-- TOC aside toggle -->
        

        <!-- go comment -->
        
    </ul>
</div>

        </div>
    

    <div class="right-bottom-side-tools">
        <div class="side-tools-container">
    <ul class="side-tools-list">
        <li class="tools-item tool-font-adjust-plus flex-center">
            <i class="fas fa-search-plus"></i>
        </li>

        <li class="tools-item tool-font-adjust-minus flex-center">
            <i class="fas fa-search-minus"></i>
        </li>

        <li class="tools-item tool-expand-width flex-center">
            <i class="fas fa-arrows-alt-h"></i>
        </li>

        <li class="tools-item tool-dark-light-toggle flex-center">
            <i class="fas fa-moon"></i>
        </li>

        <!-- rss -->
        

        
            <li class="tools-item tool-scroll-to-top flex-center">
                <i class="fas fa-arrow-up"></i>
            </li>
        

        <li class="tools-item tool-scroll-to-bottom flex-center">
            <i class="fas fa-arrow-down"></i>
        </li>
    </ul>

    <ul class="exposed-tools-list">
        <li class="tools-item tool-toggle-show flex-center">
            <i class="fas fa-cog fa-spin"></i>
        </li>
        
    </ul>
</div>

    </div>

    

    <div class="image-viewer-container">
    <img src="">
</div>


    

</main>




<script src="/js/utils.js"></script>

<script src="/js/main.js"></script>

<script src="/js/header-shrink.js"></script>

<script src="/js/back2top.js"></script>

<script src="/js/dark-light-toggle.js"></script>








<div class="post-scripts">
    
</div>



</body>
</html>
